<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <span>试题录入</span>
        <el-divider></el-divider>
        <el-form
          ref="form"
          :model="formData"
          :rules="formRules"
          label-width="80px"
        >
          <el-form-item label="学科" prop="subjectID">
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 400px"
              v-model="formData.subjectID"
              @change="change"
            >
              <el-option
                :label="item.subjectName"
                :value="item.id.toString()"
                v-for="item in subjectList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录" prop="catalogID">
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 400px"
              v-model="formData.catalogID"
              @focus="getDirectory"
            >
              <el-option
                :label="item.directoryName"
                :value="item.id.toString()"
                v-for="item in directorysList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业" prop="enterpriseID">
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 400px"
              v-model="formData.enterpriseID"
            >
              <el-option
                :label="item.company"
                :value="item.id.toString()"
                v-for="item in CompanysList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市" prop="province">
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 200px"
              v-model="formData.province"
              @change="changeFn"
            >
              <el-option
                v-for="(item, index) in provincesList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 200px"
              v-model="formData.city"
            >
              <el-option
                v-for="(item, index) in citysList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向" prop="direction">
            <el-select
              placeholder="请选择"
              size="small"
              style="width: 400px"
              v-model="formData.direction"
            >
              <el-option
                :label="item"
                :value="item"
                v-for="item in directionList"
                :key="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型" prop="questionType">
            <el-radio-group v-model="formData.questionType">
              <el-radio
                :label="item.id"
                v-for="item in questionTypeList"
                :key="item.id"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度" prop="difficulty">
            <el-radio-group v-model="formData.difficulty">
              <el-radio
                :label="item.id"
                v-for="item in difficultyList"
                :key="item.id"
                >{{ item.value }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="题干" prop="question">
            <quillEditor ref="myQuillEditor" v-model="formData.question" />
          </el-form-item>
          <el-form-item label="选项" v-if="formData.questionType === '1'">
            <el-row v-for="item in options" :key="item.code">
              <el-radio-group v-model="Radiocheck">
                <el-radio :label="item.code">
                  <template>
                    <span style="margin-right: 10px">{{ item.code }}:</span>
                    <el-input
                      placeholder="请输入内容"
                      size="small"
                      v-model="item.title"
                    ></el-input>
                    <el-upload
                      list-type="picture-card"
                      class="avatar-uploader"
                      action="#"
                      :show-file-list="false"
                    >
                      <img v-if="item.img" :src="item.img" class="avatar" />
                      <span class="avatar-uploader-icon">上传图片</span>
                    </el-upload>
                  </template>
                </el-radio>
              </el-radio-group>
            </el-row>
          </el-form-item>
          <el-form-item label="选项" v-if="formData.questionType === '2'">
            <el-checkbox-group v-model="Radiocheck">
              <el-row v-for="item in options" :key="item.code">
                <el-checkbox :label="item.code">
                  <template>
                    <span style="margin-right: 10px">{{ item.code }}:</span>
                    <el-input
                      placeholder="请输入内容"
                      size="small"
                      style="width: 224px"
                      v-model="item.title"
                    ></el-input>
                    <el-upload
                      class="avatar-uploader ava"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                    >
                      <img
                        v-if="options.img"
                        :src="options.img"
                        class="avatar"
                      />
                      <span class="avatar-uploader-icon">上传图片</span>
                    </el-upload>
                  </template></el-checkbox
                >
              </el-row>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item style="margin-top: -50px">
            <el-button
              type="danger"
              icon="el-icon-plus"
              size="small"
              :disabled="formData.questionType === '1'"
              v-if="!(formData.questionType === '3')"
              @click="add"
              >增加选项与答案</el-button
            >
          </el-form-item>
          <el-form-item label="解析视频">
            <el-input
              style="width: 400px"
              size="small"
              v-model="formData.videoURL"
            ></el-input>
          </el-form-item>
          <el-form-item label="答案解析" prop="answer">
            <quillEditor ref="myQuillEditor" v-model="formData.answer" />
          </el-form-item>
          <el-form-item label="题目备注">
            <el-input
              style="width: 400px"
              size="small"
              type="textarea"
              rows="5"
              placeholder="请输入内容"
              v-model="formData.remarks"
            ></el-input>
          </el-form-item>
          <el-form-item label="试题标签">
            <el-select
              multiple
              placeholder="请选择"
              size="small"
              style="width: 400px"
              v-model="formData.tags"
              @focus="getTag"
            >
              <el-option
                :label="item.tagName"
                :value="item.tagName"
                v-for="item in TagList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="btnOk"
              >确认提交</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import { provinces, citys } from "@/api/citys";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import COS from "cos-js-sdk-v5";
import { addQuestions } from "@/api/question";
const cos = new COS({
  SecretId: "AKIDDF1XpOghV3LOAi18IPHvKTMCn8E4ey2u",
  SecretKey: "lHY2GFCIBrLejeNtGSQAgxzvd7QYTChy",
});
import {
  getSubjects,
  getTags,
  getDirectorys,
  getCompanys,
  getQuestionsinfo,
  editQuestions,
} from "@/api/question";
export default {
  name: "Shiti",
  data() {
    return {
      ID: this.$route.query.id,
      formData: {
        // number: "", //试题编号后台自动生成（忽略）
        subjectID: "", //学科
        catalogID: "", //目录
        enterpriseID: "", //企业
        province: "", //城市
        city: "", //地区
        direction: "", //方向
        questionType: "1", //题型
        difficulty: "1", //难度
        question: "", //题干
        options: [
          // {
          //   code: "", //代码├─
          //   title: "", //标题├─
          //   img: "", //图片URL├─
          //   isRight: "", //是否正确答案
          // },
        ], //选项item
        videoURL: "", //解析视频
        answer: "", //答案解析
        remarks: "", //题目备注
        tags: "", //试题标签
        // isPerfect: "", //是否精选题后台自动生成（忽略）
      },
      formRules: {
        //number:[{required:true,message:'请输入',tigger:'blur'}],
        subjectID: [{ required: true, message: "请输入", tigger: "change" }],
        catalogID: [{ required: true, message: "请输入", tigger: "change" }],
        enterpriseID: [{ required: true, message: "请输入", tigger: "change" }],
        province: [{ required: true, message: "请输入", tigger: "change" }],
        question: [{ required: true, message: "请输入", tigger: "blur" }],
        questionType: [{ required: true, message: "请输入", tigger: "change" }],
        difficulty: [{ required: true, message: "请输入", tigger: "change" }],
        answer: [{ required: true, message: "请输入", tigger: "blur" }],
        tags: [{ required: true, message: "请输入", tigger: "change" }],
        direction: [{ required: true, message: "请输入", tigger: "change" }],
      },
      provincesList: provinces(), // 城市
      citysList: [],
      subjectList: [],
      TagList: [],
      directorysList: [],
      CompanysList: [],
      directionList: [
        "o2o",
        "外包服务",
        "企业服务",
        "互联网金融",
        "企业咨询",
        "互联网",
        "电子商务",
        "其他",
      ],
      questionTypeList: [
        { id: "1", name: "单选" },
        { id: "2", name: "多选" },
        { id: "3", name: "简答" },
      ],
      difficultyList: [
        { id: "1", value: "简单" },
        { id: "2", value: "一般" },
        { id: "3", value: "困难" },
      ],
      codeList: [
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      Radiocheck: [],
      i: 0,
      //checkedList: [],
      options: [
        {
          code: "A",
          img: "",
          title: "",
          isRight: false,
        },
        {
          code: "B",
          img: "",
          title: "",
          isRight: false,
        },
        {
          code: "C",
          img: "",
          title: "",
          isRight: false,
        },
        {
          code: "D",
          img: "",
          title: "",
          isRight: false,
        },
      ],
    };
  },
  components: {
    quillEditor,
  },
  created() {
    this.initData();
    if (this.ID) {
      this.getInfo();
    } else {
      return;
    }
  },
  methods: {
    async initData() {
      //学科
      const { items } = await getSubjects({ page: 1, pagesize: 100 });
      this.subjectList = items;
      //企业
      const res = await getCompanys({ page: 1, pagesize: 100 });
      this.CompanysList = res.items;

      //console.log(this.options);
      //console.log(res4);
    },
    async getDirectory() {
      //目录
      const res3 = await getDirectorys({
        page: 1,
        pagesize: 100,
        subjectID: this.formData.subjectID,
      });
      //console.log(res3);
      this.directorysList = res3.items;
    },
    async getTag() {
      //标签
      const res2 = await getTags({
        page: 1,
        pagesize: 100,
        subjectID: this.formData.subjectID,
      });
      this.TagList = res2.items;
    },
    async getInfo() {
      const res4 = await getQuestionsinfo(this.ID);
      this.formData = res4;
      this.formData.subjectID = this.formData.subjectID.toString();
      this.formData.catalogID = this.formData.catalogID.toString();
      this.formData.enterpriseID = this.formData.enterpriseID.toString();
      this.formData.tags = this.formData.tags.split(",");
      this.options = res4.options;
      if (res4.questionType === "2") {
        this.options.forEach((item) => {
          if (item.isRight === 1) {
            this.Radiocheck.push(item.code);
          }
        });
      }
      if (res4.questionType === "1") {
        this.Radiocheck = this.options.find((item) => item.isRight === 1).code;
      }
    },
    changeFn() {
      // 获取地区赋值给本地
      this.citysList = citys(this.formData.province);
    },
    onPreview(file) {
      this.formData.options.img = file.url;
    },
    httpRequest({ file }) {
      cos.putObject({
        // 配置
        Bucket: "cat-1313179122", // 存储桶名称
        Region: "ap-nanjing", // 存储桶地域
        Key: file.name, // 文件名作为key
        StorageClass: "STANDARD", // 此类写死
        Body: file, // 将本地的文件赋值给腾讯云配置
      });
    },
    async btnOk() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        return console.log(error);
      }
      if (this.formData.questionType === "1") {
        this.options.forEach((item) => {
          if (item.code === this.Radiocheck) {
            item.isRight = true;
          }
        });
      } else if (this.formData.questionType === "2") {
        this.options.forEach((item) => {
          this.Radiocheck.forEach((val) => {
            if (val === item.code) {
              item.isRight = true;
            }
          });
        });
      }
      this.formData.options = this.options;
      this.formData.subjectID = this.formData.subjectID * 1;
      this.formData.catalogID = this.formData.catalogID * 1;
      this.formData.enterpriseID = this.formData.enterpriseID * 1;
      this.formData.tags = this.formData.tags.toString(",");
      //this.formData.tags = this.formData.tags * 1;
      if (this.ID) {
        await editQuestions(this.formData);
        this.$message.success("修改成功");
      } else {
        await addQuestions(this.formData);
        this.$message.success("添加成功");
      }

      this.$router.push("/tiku_base");
    },
    add() {
      if (this.i > this.codeList.length - 1) return;
      this.options.push({
        code: this.codeList[this.i],
        img: "",
        title: "",
        isRight: false,
      });
      this.i++;
    },
    change() {
      this.formData.catalogID = "";
      this.formData.tags = "";
    },
  },
};
</script>

<style scoped lang='scss'>
.dashboard {
  &-container {
    margin: 16px;
  }
  &-text {
    font-size: 30px;
    // line-height: 46px;
  }
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  /* position: relative; */
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep .avatar-uploader {
  position: relative;
  right: -297px;
  top: -40px;
}
::v-deep .ava {
  right: -270px;
}
::v-deep .avatar-uploader-icon {
  display: inline-block;
  font-size: 14px;
  color: #000;
  width: 80px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
::v-deep .el-upload--picture-card {
  width: 80px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
::v-deep .avatar {
  width: 178px;
  height: 178px;
  /* display: block; */
  display: inline-block;
}
::v-deep .el-checkbox__input {
  position: relative;
  top: -62px;
}
::v-deep .ql-container {
  height: 200px;
}
::v-deep .el-form-item__content {
  line-height: 0px;
}
</style>